<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>强制绑定样式</title>
<!--绑定样式 绑定类和绑定style样式的两种方式    -->
    <style>
        .classA{
            background: hotpink;
        }
        .classB{
            color: yellow;
        }
        .classC{
           font-size: 80px;
        }
    </style>
</head>
<body>
<div id="app">
<!--    绑定class类-->

<!--第一种情况 我不知道元素是那个类 用那个类是后台数据告诉我的    -->
<!--动态绑定class以后 静态class仍然可以使用    -->
    <p :class="myClass" class="classA">hello world!!</p>
<!--第二种情况,重要  这个元素绑定的是那个类或者是那些个类确定了 但是那个类生效不清除,生效不生效由数据决定    -->
    <p :class="{classA:isA,classB:isB}">good morning</p>
<!--第三种情况  几乎不用 这个元素一下子有好多类  v-bind就是动态绑定  -->
<!--    <p class="classA classB classC">good night</p> 静态数据绑定 就是直接写-->
    <p :class="['classA', 'classB', 'classC']">good night</p>

<!--    绑定style-->
    <p :style="{color:myColor,fontSize:mySize }"></p>
</div>
<script src="js/vue.js"></script>
<script>
    const vm=new Vue({
        el:'#app',
        data(){
            return {
                myClass:'classC',
                isA:true,
                isB:true,
                myColor:'red',
                mySize:'80px'
            }
        },
    });
</script>
</body>
</html>